<template>
  <div class="home">
    <headerView></headerView>
    <div class="scroll-wrapper" ref="scrollWrapper">
      <div>
        <swiper :list="home.swiperList" v-if="home.swiperList"></swiper>
        <icons :iconList="home.iconList" v-if="home.iconList"></icons>
        <recommend :recommendList="home.recommendList" v-if="home.recommendList"></recommend>
        <weekend :weekendList="home.weekendList" v-if="home.weekendList"></weekend>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import headerView from './components/header.vue'
import swiper from './components/swiper.vue'
import icons from './components/icons.vue'
import recommend from './components/recommend.vue'
import weekend from './components/weekend.vue'
import axios from 'axios'
import BScroll from 'better-scroll'
import {mapState} from 'vuex'
export default{
    data(){
      return {
        home:{},
        lastCity:''
      }
    },
    components:{
        headerView,
        swiper ,
        icons,
        recommend,
        weekend
    },
    methods:{
      getHomeInfo(){
        axios.get('/api/index.json?city='+this.city).then((request) => {
          this.home = request.data
        })
      }
    },
    mounted(){
      this.getHomeInfo()
      this.lastCity = this.city
      this.scroll = new BScroll(this.$refs.scrollWrapper,{})
    },
    computed:{
      ...mapState(['city'])
    },
    activated() {
      if(this.lastCity !== this.city){
        this.lastCity = this.city
        this.getHomeInfo()
      }
    }

}
</script>

<style lang="stylus" scoped>
.scroll-wrapper
  position absolute
  top 45px
  left 0
  right 0
  bottom 0
  overflow hidden
</style>
